<template>
  <view class="commentCreate">
    <view class="inputView" @click="showInput">写评论</view>
    <view class="flex f-ai-c mr14">
      <uv-icon name="star" size="50rpx"></uv-icon>
    </view>
    <view class="exchangeWeChat">
      <uv-icon name="weixin-fill" color="#fff" size="38rpx"></uv-icon>
      交换微信
    </view>
  </view>
  <CommentInput
    v-if="commentInputShow"
    class="CommentInputWrap"
    @close="() => (commentInputShow = false)"
  />
</template>

<script setup>
import { ref } from "vue";
import CommentInput from "/components/CommentInput/index";

const commentInputShow = ref(false);
const showInput = () => {
  commentInputShow.value = true;
};

defineExpose({
  showInput,
});
</script>

<style lang="scss">
.commentCreate {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  padding: 32rpx 74rpx calc(24rpx + env(safe-area-inset-bottom) / 2);
  position: fixed;
  bottom: 0;
  left: 0;
}
.inputView {
  width: 348rpx;
  height: 52rpx;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  font-size: 26rpx;
  color: #999;
  background-color: #f6f6f6;
  border-radius: 34rpx;
  margin-right: 30rpx;
}
.CommentInputWrap {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.exchangeWeChat {
  background-color: #5fc056;
  width: 180rpx;
  height: 52rpx;
  border-radius: 20rpx;
  color: #fff;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16rpx;
}
</style>
